﻿<DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>Historical maps</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Historical maps of IGN France" />
  <meta name="keywords" content="openlayers, timemap, historical, IGN" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    #map 
    {	position:fixed;
      top: 4em;
      left: 0;
      right:0;
      bottom:0;
      margin:0;
    }
    .info
    {	position: fixed;
      right: 0.5em;
      top: 4em;
      width: 300px;
      z-index: 1;
    }
    .ol-timeline .ol-scroll {
      height: 3em;
    }
    .ol-timeline .ol-feature {
      transform: translateX(-50%);
    }
    .ol-timeline.ol-zoomhover .ol-scroll .ol-feature:hover, 
    .ol-timeline.ol-zoomhover .ol-scroll .ol-feature.ol-select {
      transform: translateX(-50%) scale(2);
    }
    .date {
      position: fixed;
      left: 50%;
      bottom: 1.5em;
      background: rgba(255,255,255,.5);
      transform: translateX(-50%);
      font-size: 2rem;
      margin-bottom: .05em;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
  <a href="../../index.html">
    <h1>Historical map</h1>
  </a>
  <div class="info">
  </div>

  <!-- DIV pour la carte -->
  <div id="map"></div>
  <div class='date'></div>
  
<script type="text/javascript">
  // The map
  var map = new ol.Map ({
    target: 'map',
    view: new ol.View({
      zoom: 18,
      center: [269889, 6248507]
    }),
    layers: [ new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://wxs.ign.fr/pratique/geoportail/wmts?layer=ORTHOIMAGERY.ORTHOPHOTOS&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}}&TileRow={y}',
        attributions: '<a href="https://www.geoportail.gouv.fr/">&copy; IGN-Geoportail</a>'
      })
    })]
  });

  var histo = [
    new ol.layer.Image({
      name: "1924",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1924-08-11__C2314-1541_1924_NP9_13007.jpg",
        "imageCenter": [269892.63568257954,6248535.314175406],
        "imageRotate": 3.1401654995959856,
        "imageScale": [0.2670215718130227,0.2670215718130227]
      })
    }),
    new ol.layer.Image({
      name: "1931",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1931__CCF0H-2361_1931_CAF_H-236_0003.jpg",
        "imageCenter": [269917.11527094606,6248564.182321039],
        "imageRotate": -1.4887750967772184,
        "imageScale": [0.5916825640700804,0.5916825640700804]
      })
    }),
    new ol.layer.Image({
      name: "1934",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1934__CCF0F-54B1_1934_CAF_F-54_0011.jpg",
        "imageCenter": [269884.7536107674,6248543.448601998],
        "imageRotate": -3.136726258048235,
        "imageScale": [0.6375976820489188,0.6375976820489188]
      })
    }),
    new ol.layer.Image({
      name: "1936",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1936-07-17__C2314-1501_1936_NP2_3010.jpg?raw=true",
        "imageCenter": [269937.2514666198,6248523.183442762],
        "imageRotate": -2.778805073301242,
        "imageScale": [0.47915761377123306,0.47915761377123306]
      })
    }),
    new ol.layer.Image({
      name: "1944",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1944-08-11__C2214-1091_1944_106G2130_3199.jpg?raw=true",
        "imageCenter": [269998.3656072118,6248506.391443234],
        "imageRotate": 2.362938966984174,
        "imageScale": [0.473608899531087,0.4768894853951739]
      })
    }),
    new ol.layer.Image({
      name: "1950",
      source: new ol.source.GeoImage({
        "url": "../data/INGF/IGNF_PVA_1-0__1950-05-30__C2314-1851_1950_CDP3505_0242.jpg?raw=true",
        "imageCenter": [269869.74402191263,6248527.808891151],
        "imageRotate": -0.028335836913955807,
        "imageScale": [0.3267839610026342,0.326366151015898]
      })
    })
  ];

  histo.forEach(function(l) { map.addLayer(l); });


  var tline = new ol.control.Timeline({
    className: 'ol-pointer ol-zoomhover',
    features: histo,
    minDate: new Date('1923'),
    maxDate: new Date('2019'),
    getFeatureDate: function(l) { return l.get('name'); },
    getHTML: function(l) { return l.get('name'); }
  });

  tline.on('scroll', function(e){
    var layer, dmin = Infinity;
    histo.forEach(function(l) {
      var d = new Date(l.get('name'));
      var dt = Math.abs(e.date-d);
      if (dt < dmin) {
        layer = l;
        dmin = dt;
      }
      l.setVisible(false);
    });
    layer.setVisible(true);
    $('.date').text(layer.get('name'));
  });
  tline.on('select', function(e) {
    tline.setDate(e.feature);
  });

  map.addControl (tline);
  tline.setDate(1924);


</script>

</body>
</html>